<template>
  <n-config-provider :theme="theme">
    <n-space vertical size="large">
      <n-layout position="absolute" :native-scrollbar="false">
        <!-- 这里是导航栏 -->
        <n-layout-header style="height: 7vh; padding: 12px" bordered>
          <n-space justify="space-between">
          <!-- 导航栏头部 -->
          <router-link to="/testPage">
          <n-button text>
              <template #icon>
                <n-icon>
                  <code-icon />
                </n-icon>
              </template>
              页面路由
            </n-button>
            </router-link>
          <n-space justify="end">
            <!-- 导航栏尾部 切换深色和浅色模式 -->
            <n-space justify="end" size="large" style="padding: 6px">
              <n-button
                v-if="theme == null"
                text
                style="font-size: 24px"
                @click="theme = darkTheme"
              >
                <n-icon>
                  <moon-icon />
                </n-icon>
              </n-button>
              <n-button
                v-if="theme != null"
                text
                style="font-size: 24px"
                @click="theme = null"
              >
                <n-icon>
                  <sun-icon />
                </n-icon>
              </n-button>
            </n-space>
          </n-space>
          </n-space>
        </n-layout-header>

        <!-- 这里是页中 内部嵌入子页面 -->
        <n-layout-content :native-scrollbar="false" style="min-height: 93vh">
          <router-view></router-view>
        </n-layout-content>

      </n-layout>
    </n-space>
  </n-config-provider>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";

import {
  useOsTheme,
  darkTheme,
  NIcon,
  NConfigProvider,
  NSpace,
  NLayout,
  NLayoutHeader,
  NMenu,
  NButton,
  NLayoutContent,
  NLayoutFooter,
} from "naive-ui";

import {
  Moon as MoonIcon,
  Sunny as SunIcon,
  CodeSlash as CodeIcon
} from "@vicons/ionicons5";

export default defineComponent({
  setup() {
    const osThemeRef = useOsTheme();
    const router = useRouter();
    return {
      darkTheme,
      theme: ref(osThemeRef.value === "dark" ? darkTheme : null),
    };
  },
  components: {
    NConfigProvider,
    NSpace,
    NLayout,
    NLayoutHeader,
    NMenu,
    NButton,
    NLayoutContent,
    NLayoutFooter,
    NIcon,
    MoonIcon,
    SunIcon,
    CodeIcon
  },
});
</script>

<style>
.n-layout-header {
  background: rgba(128, 128, 128, 0.2);
}

.n-layout-footer {
  background: rgba(128, 128, 128, 0.2);
  padding: 24px;
  height: 10vh;
}

.n-layout-sider {
  background: rgba(128, 128, 128, 0.3);
}

.n-layout-content {
  background: rgba(128, 128, 128, 0.1);
}

.carousel-img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
}
</style>
